<template>
    <view class="absolute bg-blackx w-full min-h-full box-border">
        <view class="flex justify-center pt-40 box-border" v-if="list.length==0 && status=='nomore'">
            <uv-empty mode="data"></uv-empty>
        </view>
        <view class="flex flex-col gap-4 p-4 box-border" v-else>
            <view class="flex gap-2" v-for="i in list" :key="i.id" @click="toDetail(i.post?.id??i.id)">
                <view v-if="!auditing">
                    <uv-avatar v-if="i.post?.user?.sex_name" :icon="i.post?.user?.sex_name"
                        :bgColor="i.post?.user.sex_color"></uv-avatar>
                </view>
                <!-- auditing -->
                <view class="flex flex-col" v-if="auditing">
                    <view :class="auditing?'flex-row gap-2 items-center':'flex-col'" class="flex">
                        <view class="text-whitexlight text-sm">
                            {{i.avatar?.nickname??"注册用户"+i?.user_id}}
                        </view>
                        <view class="text-whitexlight text-xs">
                            {{i.created_at_human}}
                        </view>
                    </view>
                    <view class="text-whitex text-sm">
                        <uv-text :lines="1" :text="i.content" :color="whitex"></uv-text>
                    </view>
                </view>
                <!-- none auditing -->
                <view class="flex flex-col" v-if="!auditing">
                    <view :class="auditing?'flex-row gap-2 items-center':'flex-col'" class="flex">
                        <view class="text-whitexlight text-sm">
                            {{i.post?.avatar?.nickname??"注册用户"+i.post?.user_id}}
                        </view>
                        <view class="text-whitexlight text-xs">
                            {{i.created_at_human}}
                        </view>
                    </view>
                    <view class="text-whitex text-sm">
                        <uv-text :lines="1" :text="i.post?.content" :color="whitex"></uv-text>
                    </view>
                </view>
            </view>
            <uv-load-more :status="status" @loadmore="onLoadMore" />
        </view>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        loadStatus
    } from '../../consts/datas';
    import {
        inboxList,
        inboxPageData
    } from '../../http/api';

    export default {
        data() {
            return {
                form: {
                    sea_id: 0,
                    page: 1,
                },
                last_page: 0,
                list: [],
                currentList: [],
                status: 'loadmore',
                app_title: 'SEA',
                blackxlight: colors.blackxlight,
                whitex: colors.whitex,
                auditing: false,
            }
        },
        methods: {
            onLoadMore() {
                this.form.page += 1
                this.getData()
            },
            handleLoadMore() {
                if (this.form.page === this.last_page) {
                    this.status = loadStatus.nomore
                } else {
                    this.status = loadStatus.loadmore
                }
                console.log(this.status);
            },
            toDetail(postId) {
                console.log(postId)
                uni.navigateTo({
                    url: "/pages/detail/detail?id=" + postId
                })
            },
            async getData() {
                this.status = loadStatus.loading
                const res = await inboxList(this.form)
                console.log(res)
                const data = res.data
                this.last_page = data.posts.last_page
                this.currentList = data.posts.data
                this.list = this.list.concat(data.posts.data)
                this.handleLoadMore(data)
            },
            async getPageData() {
                const res = await inboxPageData()
                const data = res.data
                this.auditing = data.auditing
            }
        },
        async onLoad(e) {
            console.log(e);
            this.form.sea_id = e.sea_id
            await this.getPageData()
            await this.getData()
        }
    }
</script>

<style>

</style>